<template>
  <div id="app">
    <!--注册路由后会多了两个对象route和router
    route为当前路由,包含当前路由的所有信息
    router为路由对象
    多了两个标签router-link和router-view
    router-link可以动态切换路由
    router-view显示路由组件
    -->
    <div id="nav">
      <router-link to="/">Home</router-link>|
      <router-link to="/about">About</router-link>|
      <router-link to="Demon1">数据绑定</router-link>|
      <router-link to="Demon2">绑定class和style</router-link>|
      <router-link to="Demon3">条件判断</router-link>|
      <router-link to="Demon4">数组遍历</router-link>|
      <router-link to="Demon5">事件绑定</router-link>|
      <router-link to="Demon6">事件属性</router-link>|
      <router-link to="Demon7">计算属性|侦听属性</router-link>|
      <router-link to="Demon8">双向绑定</router-link>|
      <router-link to="Demon9">过滤器</router-link>|
      <router-link to="Demon10">自定义指令</router-link>|
      <router-link to="Demon11">自定义组件</router-link>|
      <router-link to="Demon12">动态组件</router-link>|
      <!-- <router-link to="/Demon13/11">路由使用</router-link>| -->
      <!--方式1-->
      <!-- <router-link to="/Demon13/11?index=1#111">路由使用</router-link>| -->
      <!--方式2：动态传递对象,与push用法相同-->
      <router-link
        :to="{
          path: '/Demon13/11',
          query: {
            index: '111'
          },
          hash: '#app'
        }"
      >路由使用</router-link>|
      <router-link to="/Demon14/11/Detail">子路由使用</router-link>|
      <router-link to="/Demon15">状态管理</router-link>|
      <router-link to="/Demon16">自定义插件</router-link>|
    </div>
    <!--所有配置的路由会显示到router-view中-->
    <router-view />
  </div>
</template>

<style lang="stylus">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;

  #nav {
    background-color: red;
  }
}
</style>
